import React, { memo, useState } from 'react'
import { shallowEqual, useSelector } from "react-redux";
import { PictureWrapper } from "@/views/detail/c-cpns/detail-pictures/style";
import PictureBrowser from '@/base-ui/picture-browser'

const DetailPicture = memo((props) => {

  const {detailInfo} = useSelector(state => {
    return {
      detailInfo: state.detail.detailInfo
    }
  }, shallowEqual)
  const pictureUrls = detailInfo?.picture_urls || [];
  const [showBrowser, setShowBrowser] = useState(false)

  const showBrowserClickHandle = (flag) => {
    setShowBrowser(flag)
  }

  return (
    <PictureWrapper>
      <div className="top">
        <div className="left">
          <div className="item" onClick={ () => showBrowserClickHandle(true) }>
            <img src={ pictureUrls[0] } alt=""/>
            <div className="cover"></div>
          </div>
        </div>
        <div className="right">
          {
            pictureUrls.slice(1, 5).map(item => {
              return (
                <div className="item" key={ item } onClick={ () => showBrowserClickHandle(true) }>
                  <img src={ item } alt=""/>
                  <div className="cover"></div>
                </div>
              )
            })
          }
        </div>
      </div>
      <button className='show-btn' onClick={ () => showBrowserClickHandle(true) }>查看图片</button>
      {/*图片预览*/ }
      {
        showBrowser && <PictureBrowser pictureUrls={ pictureUrls } closeClick={ () => showBrowserClickHandle(false) }/>
      }

    </PictureWrapper>
  )
})
export default DetailPicture
